<script setup>
import { watch, ref } from 'vue'
import { RouterView, useRoute } from 'vue-router'
import Layout from '@/layout/index.vue'

const route = useRoute()
const theme = ref({
  token: {
    colorPrimary: '#808080', // 主色调
  },
})

watch(
  () => route.name,
  () => {
    const title = route.meta.title
    document.title = title ? `${title} - Yesgamers` : 'Yesgamers'
  },
  { immediate: true },
)
</script>

<template>
  <a-style-provider hash-priority="high">
    <a-config-provider :theme="theme">
      <Layout>
        <RouterView
          v-if="route.meta.keepAlive"
          v-slot="{ Component }"
          :key="'keepalive' + route.fullPath"
        >
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </RouterView>
        <RouterView v-else v-slot="{ Component }" :key="'noKeepalive' + route.fullPath">
          <component :is="Component" />
        </RouterView>
      </Layout>
    </a-config-provider>
  </a-style-provider>
</template>
